---
title: "Chart Tool Panels"
enterprise: true
---

The Chart Tool Panels allow users to change the selected chart type and customise the data and chart formatting.

{% gridExampleRunner title="Chart Tool Panels" name="chart-tool-panels" /%}

The Chart Tool Panels are accessed by selecting `Edit Chart` from the [Chart Menu](./integrated-charts-menu) in the top-right corner of the chart. Note they can also be opened 
via configuration (see examples in this section), or programmatically through the Grid API, see [Open / Close Chart Tool Panels](#chart-tool-panel-api).

## Chart Tool Panel

The Chart Panel can be used to change the chart type and chart theme.

{% imageCaption imagePath="resources/chart-panel.png" alt="Chart Settings Panel"  constrained=true centered=true maxWidth="30%" %}
Chart Panel
{% /imageCaption %}

It is possible to configure which chart groups and chart types are included and in which order via the `chartToolPanelsDef` grid option:

{% apiDocumentation source="grid-options/properties.json" section="charts" names=["chartToolPanelsDef"] /%}

Note that the Chart Panel key is `settingsPanel`.

The full list of chart groups with the corresponding chart types are shown below:

{% interfaceDocumentation interfaceName="ChartGroupsDef" config={"description":"", "asCode":true, "lineBetweenProps": false} /%}

{% note %}
The contents and order of chart menu items in the [Context Menu](./context-menu/) will match the `ChartGroupsDef` configuration.
{% /note %}

The example below shows a subset of the provided chart groups with the chart types reordered. Note the following:

* Only the **Pie**, **Columns** and **Bar** chart groups are shown in the chart panel.
* Only the **Pie**, **Columns** and **Bar** chart groups are shown in the Context Menu when you right click the grid.
* Note the order of the chart groups and their chart types matches the order they are specified in `chartGroupsDef`.
* The Chart Panel is configured to be open by default via `defaultToolPanel: 'settings'`.

{% gridExampleRunner title="Chart Tool Panel Customisation" name="settings-panel-customisation" /%}

## Set Up Tool Panel

The Set Up Panel can be used to change the chart category and series. It is not applicable for Pivot Charts. 

{% imageCaption imagePath="resources/data-panel.png" alt="Chart Set Up Panel" maxWidth="30%" constrained=true centered=true %}
Chart Set Up Panel
{% /imageCaption %}

It is possible to configure which groups are shown, the order in which they appear and whether they are opened by default via the `chartToolPanelsDef` grid option:

{% apiDocumentation source="grid-options/properties.json" section="charts" names=["chartToolPanelsDef"] /%}

Note that the Set Up Panel key is `dataPanel`.

The default list and order of the Set Up Panel groups are as shown below:

```{% frameworkTransform=true %}
const gridOptions = {
    chartToolPanelsDef: {
        dataPanel: {
            groups: [
                { type: 'categories', isOpen: true },
                { type: 'series', isOpen: true },
                { type: 'seriesChartType', isOpen: true }
            ]
        }
    }
}
```

{% note %}
The `seriesChartType` group is only shown in [Combination Charts](./integrated-charts-api-range-chart/#combination-charts).
{% /note %}

The following example shows some Set Up Panel customisations. Note the following:

* The **Categories** group is not included.
* The **Series** group is closed by default.
* The Set Up Panel is configured to be open by default via `defaultToolPanel: 'data'`.

{% gridExampleRunner title="Set Up Tool Panel Customisation" name="data-panel-customisation" /%}

## Customize Tool Panel

The Customize Panel allows users to format the chart where the available formatting options differ between chart types.

{% imageCaption imagePath="resources/format-panel.png" alt="Chart Customize Panel" maxWidth="30%" constrained=true centered=true %}
Chart Customize Panel
{% /imageCaption %}

It is possible to configure which groups are shown, the order in which they appear and whether they are opened by default via the `chartToolPanelsDef` grid option:

{% apiDocumentation source="grid-options/properties.json" section="charts" names=["chartToolPanelsDef"] /%}

Note that the Customize Panel key is `formatPanel`.

The default list and order of format groups are as follows:

```{% frameworkTransform=true %}
const gridOptions = {
    chartToolPanelsDef: {
        formatPanel: {
            groups: [
                { type: 'chart', isOpen: false },
                { type: 'titles', isOpen: false },
                { type: 'legend', isOpen: false },
                { type: 'horizontalAxis', isOpen: false },
                { type: 'verticalAxis', isOpen: false },
                { type: 'series', isOpen: false },
            ]
        }
    }
}
```

{% note %}
The selected chart determines which groups are displayed. For example, a pie chart does not have an axis so **Axis** groups will not be shown even if they are listed in `chartToolPanelsDef.formatPanel.groups`.

For chart types that have both horizontal and vertical axes, the `axis` group can be replaced with the more specific `horizontalAxis` and `verticalAxis` groups to control these options independently.
{% /note %}

The following example shows some Customize Panel customisations. Note the following:

* The customize panel groups have been reordered.
* The **Horizontal Axis** group is open by default.
* The **Title** and **Legend** groups have been omitted.
* The Customize Panel is configured to be open by default via `defaultToolPanel: 'format'`.

{% gridExampleRunner title="Customize Tool Panel Customisation" name="format-panel-customisation" /%}

## Omitting & Ordering Tool Panels

The Chart Tool Panels can be omitted and ordered using the `chartToolPanelsDef.panels` grid option:

```{% frameworkTransform=true %}
const gridOptions = {
    chartToolPanelsDef: {
        panels: ['data', 'format', 'settings'], // default order
    },
}
```

To hide the Chart Tool Panels, the `chartToolPanelsDef.panels` grid option can be set to an empty array:

```{% frameworkTransform=true %}
const gridOptions = {
    chartToolPanelsDef: {
        panels: [], // No Chart Tool Panels are shown and Edit Chart is removed from the Chart Menu
    },
}
```

The following example shows how the Chart Tool Panels can be omitted and ordered. Note the following:

* The **Customize** Tool Panel has been omitted.
* The **Set Up** Tool Panel appears before the **Chart** Tool Panel.
* The Set Up Panel is configured to be open by default via `defaultToolPanel: 'data'`.

{% gridExampleRunner title="Omitting & Ordering Tool Panels" name="omitting-ordering-tool-panels" /%}

## Chart Tool Panel API

The Chart Tool Panels can be opened and closed programmatically using the following grid APIs:

{% apiDocumentation source="grid-api/api.json" section="charts" names=["openChartToolPanel", "closeChartToolPanel"] /%}

The example below demonstrates how you can open and close the Chart Tool Panels.

* Click **Open Chart Tool Panel** to open the default `Chart` tab via `openChartToolPanel()`
* Click **Open Chart Tool Panel Customize tab** to open the `Customize` tab via `openChartToolPanel()`
* Click **Close Chart Tool Panel** to close via `closeChartToolPanel()`

{% gridExampleRunner title="Open/Close Chart Tool Panel" name="chart-tool-panel-api"  exampleHeight=800 /%}

## Next Up

Continue to the next section to learn about the [Chart Container](./integrated-charts-container/).
